陣列點燈 ( 動畫 )

教學原文參考：陣列點燈 ( 動畫 )

這篇文章延續「陣列點燈 ( 顯示圖形 )」文章，繼續介紹使用「陣列」積木，搭配「迴圈」和「點亮」積木，讓 micro:bit 能將陣列顯示的圖形，變成上下左右可移動的動畫。

相關文章參考：陣列點燈 ( 顯示圖形 )、陣列、迴圈、點亮。

積木程式原理

參考「陣列點燈 ( 顯示圖形 )」文章，開啟陣列點燈範例。

範例：陣列點燈 ( 顯示圖形 ) - 點燈版

在畫面中新增一個「重複無限次」積木，將啟動中的計次迴圈移動到重複無限次積木裡，在計次迴圈結束後，加入「插入到索引值」以及「取得並移除最末項目」，就能把第一層陣列的最後一個項目，移到最前面。

完成後，啟動 micro:bit，就會看見圖案「從上往下」移動。

如果要改成水平方向移動，就需要再度使用「計次迴圈」讀取第一層陣列的內容，讀取後，把最後一個項目移動到第一個項目，就能做出水平方向移動的動畫。

完成後，啟動 micro:bit，就會看見圖案「從左到右」移動。

加入按下 A、B 和 A+B 按鈕控制動畫移動的程式，按下 A 按鈕時設定 type 變數為 2，按下 B 按鈕時設定 type 變數為 1，，按下 A+B 按鈕時設定 type 變數為 0。

修改剛剛的動畫程式，加入邏輯判斷，判斷如果 type 等於 1，就往右移動 ( 最後一個項目移動到第一個項目 )，如果 type 等於 2，就往左移動 ( 第一個項目移動到最後一個項目 )，因為只判斷 type 等於 1 或 2，所以如果 type 等於 0 就不會執行動畫的程式。

完成後，啟動 micro:bit，就能夠用 A、B 按鈕控制燈號移動 ( AB 同時按下就會停止動畫)。

範例解答

• 範例解答：陣列點燈 ( 動畫 ) - 按鈕控制

實作「陣列點燈 ( 動畫 )」的小技巧

• 為什麼要使用「陣列」呢？

  使用陣列可以輕鬆完成「大型」( 超過 5x5 ) 的圖案，以及進行較為複雜的動畫效果或圖案效果。

• 「陣列」可以應用在哪些地方呢？

  熟悉陣列操作之後，能夠應用於較為複雜的遊戲、燈號圖形設計、長條圖...等，特別是跟燈號相關的遊戲，都會看到大量的陣列操作。

關於我

大家好，我是 OXXO，是個即將邁入中年的斜槓青年，如果對我有點興趣(笑，可以與我聯繫，一起來做點有玩又有創意的東西吧！

• OXXO.STUDIO 部落格
• OXXO.STUDIO 粉絲團
• Steam 教育學習網
• Steam 教育學習網粉絲團